<template>
	<view class="msg-detail-wrap">
		<image class="msg-detail-bg" src="../../static/msgDetailBg.png" mode=""></image>

		<scroll-view class="msg-detail" scroll-y="true" v-if="msgData">
			<!-- 消息头部 -->
			<view class="msg-detail-top">
				<view class="msg-title-time">
					<view class="msg-title" v-if="type == 1"><text class="user-name">{{msgData.fromUserName}}</text>申请添加好友</view>
					<view class="msg-title" v-else-if="type == 5">{{msgData.fromUserName}} 点评了你</view>
					<view class="msg-title" v-else-if="type == 6">{{msgData.fromUserName}} 分享了一条点评</view>
					<view class="msg-title" v-else-if="type == 7">{{msgData.fromUserName}} 请求分享您发过的一条点评</view>
					<view class="msg-title" v-else-if="type == 8">{{msgData.fromUserName}} 申请添加您的被评人为好友</view>
					<view class="msg-title" v-else-if="type == 9">{{msgData.fromUserName}} 通过好友点评申请添加您为好友</view>

					<view class="msg-title" v-else>系统消息</view>
					<view class="msg-time">{{msgData.createdTime}}</view>
				</view>
				<image class="msg-avatar" :src="getImgUrl(msgData.fromAvatar)" v-if="type == 1 || type == 6"></image>
			</view>

	
			<!-- 直接添加好友申请 -->
			<view class="user-msg" v-if="type == 1">
				<view class="user-remark2">
					{{msgData.fromDesc}}
				</view>

				<view class="switch-block" v-if="msgData.isPass == 0">
					<view class="switch-block-title">看点评权限设置</view>
					<switchBarItem :name="'不让他（她）看'" :subName="'但不包括给他（她）的点评'" :initVal="switch1Val" @switch="toggleSwitch1"></switchBarItem>
					<switchBarItem :name="'不看他（她)'" :initVal="switch2Val" @switch="toggleSwitch2"></switchBarItem>
				</view>
				<view class="btns" v-if="msgData.isPass == 0">
					<view class="short-btn" @tap.stop="confirm">同意</view>
					<view class="short-btn grey" @tap.stop="cancel">不同意</view>
				</view>
			</view>
			
			<!-- 添加好友成功通知 -->
			<view class="system-msg" v-if="type == 2">
				<view class="system-msg-text">
					您已成功添加 <text class="user-name">{{msgData.fromUserName}}</text> 为好友
				</view>
			</view>
			
			<!-- 公告 -->
			<view class="system-msg" v-if="type == 3">
				<view class="system-msg-text">
					{{msgData.msgRemark}}
				</view>
			</view>
			
			<!-- type == 4 聊天消息，放到单独页面维护了 -->
			
			<!-- XX点评了你 -->
			<view class="system-msg" v-if="type == 5">
				<view class="system-msg-text">
					{{msgData.fromUserName}}点评了你，<text class="to-view-btn" @tap.stop="toViewComment">前往查看</text>
				</view>
			</view>
			
			
			<!-- 好友分享点评给你 -->
			<view class="user-msg" v-if="type == 6">
				<view class="msg-content">
					<text class="fix-text nml">点评人：</text>
					<image class="from-user-avatar" :src="getImgUrl(msgData.commentFromAvatar)"></image>
					<text class="from-user-name">{{msgData.commentFromName}}</text>
				</view>
				<view class="shared-comment" @tap.stop="toViewComment">
					<view class="shared-expert-name">{{msgData.expertName}}</view>
					<view class="shared-expert-comp">{{msgData.expertCompany || '--'}}</view>
					<image class="shared-expert-avatar" :src="getImgUrl(msgData.expertAvatar)" mode=""></image>
				</view>
			</view>
			
			<!-- 好友分享你的点评 -->
			<view class="user-msg" v-if="type == 7">
				<view class="msg-content pdt14">
					<image class="from-user-avatar" :src="getImgUrl(msgData.fromAvatar)"></image>
					<text class="from-user-name">{{msgData.fromUserName}}</text>
					<text class="fix-text">想要分享你的点评给</text>
					<image class="to-user-avatar" :src="getImgUrl(msgData.beSharedUserAvatar)"></image>
					<text class="to-user-name">{{msgData.beSharedUserName}}</text>
				</view>

				<view class="shared-comment mb20" @tap.stop="toViewComment">
					<view class="shared-expert-name">{{msgData.expertName}}</view>
					<view class="shared-expert-comp">{{msgData.expertCompany || '--'}}</view>
					<image class="shared-expert-avatar" :src="getImgUrl(msgData.expertAvatar)" mode=""></image>
				</view>

				<view class="other-tips mg0">点击同意表示您愿意将这条点评分享给您朋友的朋友</view>
				<view class="btns" v-if="msgData.isPass == 0">
					<view class="short-btn" @tap.stop="isAgreeShare(true)">同意</view>
					<view class="short-btn grey" @tap.stop="isAgreeShare(false)">不同意</view>
				</view>
			</view>
			
			<!-- 好友申请添加被评人为好友 -->
			<view class="user-msg" v-if="type == 8">
				<view class="msg-content">
					<image class="from-user-avatar" :src="getImgUrl(msgData.fromAvatar)"></image>
					<text class="from-user-name">{{msgData.fromUserName}}</text>
					<text class="fix-text">申请添加</text>
					<image class="to-user-avatar" :src="getImgUrl(msgData.beSharedUserAvatar)"></image>
					<text class="to-user-name">{{msgData.beSharedUserName}}</text>
					<text class="fix-text">为好友:</text>
				</view>
				<view class="user-remark" v-if="msgData.applyContent">
					{{msgData.applyContent}}
				</view>
				<view class="other-tips">选择同意后，系统会发送一条信息给<text class="user-name">{{msgData.beSharedUserName}}</text>其同意后即可成为好友。</view>
				<view class="btns" v-if="msgData.isPass == 0">
					<view class="short-btn" @tap.stop="isAgreeApply(true)">同意</view>
					<view class="short-btn grey" @tap.stop="isAgreeApply(false)">不同意</view>
				</view>
			</view>


			<!-- 通过点评添加好友申请 -->
			<view class="user-msg" v-if="type == 9">
				<view class="msg-content bb">
					<image class="from-user-avatar" :src="getImgUrl(msgData.fromAvatar)"></image>
					<text class="from-user-name">{{msgData.fromUserName}}</text>
					<text class="fix-text">申请添加好友</text>
				</view>
				<view class="apply-form-msg">
					<text class="fix-text">通过</text>
					<image class="from-user-avatar" :src="getImgUrl(msgData.beSharedUserAvatar)"></image>
					<text class="from-user-name">{{msgData.beSharedUserName}}</text>
					<text class="fix-text">的点评分享添加</text>
				</view>
				
				<view class="switch-block" v-if="msgData.isPass == 0">
					<view class="switch-block-title">看点评权限设置</view>
					<switchBarItem :name="'不让他（她）看'" :subName="'但不包括给他（她）的点评'" :initVal="switch1Val" @switch="toggleSwitch1"></switchBarItem>
					<switchBarItem :name="'不看他（她'" :initVal="switch2Val" @switch="toggleSwitch2"></switchBarItem>
				</view>
				
				<view class="btns" v-if="msgData.isPass == 0">
					<view class="short-btn" @tap.stop="confirm">同意</view>
					<view class="short-btn grey" @tap.stop="cancel">不同意</view>
				</view>
			</view>
			

			<view class="msg-status-mask" v-if="(type == 1 || type == 7 || type == 8 || type == 9) && msgData.isPass != 0">
				<image class="status-img" v-if="msgData.isPass == 1" src="../../static/applyPassIcon.png"
					mode=""></image>
				<image class="status-img" v-if="msgData.isPass == 2" src="../../static/applyDenyIcon.png"
					mode=""></image>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
	    computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				type: 3, // 消息类型
				msgId: '',
				msgData: null,
				switch1Val: false,
				switch2Val: false,
				selectedUsers: []
			}
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			this.msgId = options.id
		},
		mounted() {
			this.getMsgDetail()
			this.getUnseeFrineds()
			this.getUnlikeFrineds()
		},
		methods: {
			getMsgDetail() {
				this.$api.getMsgDetail(this.msgId).then((res) => {
					if (res.type == 1 || res.type == 9) {
						this.getFriendApplyDetail(res.businessId, res)
					} else if (res.type == 6 || res.type == 7) {
						// 收到一条分享的点评
						this.getCommentDetail(res.businessId, res)
					} else {
						this.msgData = res
					}
				})
			},
			getFriendApplyDetail(id, preData) {
				this.$api.getFriendApplyDetail(id).then((res) => {
					if(!res) res = {}
					this.msgData = {
						...preData,
						fromDesc: res.fromDesc,
						isPass: res.isPass
					}
				})
			},
			toggleSwitch1(val) {
				this.switch1Val = val
			},
			toggleSwitch2(val) {
				this.switch2Val = val
			},
			confirm() {
				this.passAddFriendApply()
			},
			cancel() {
				this.denyAddFriendApply()
			},
			passAddFriendApply() {
				this.$api.passAddFriendApply(this.msgData.businessId).then(async () => {
					this.msgData.isPass = 1
					if(this.switch1Val){
						this.setUnseeFrineds()
					}
					if(this.switch2Val){
						this.setUnlikeFrineds()
					}
					this.sendHelloMessage() // 发送问候
				})
			},
			denyAddFriendApply() {
				this.$api.denyAddFriendApply(this.msgData.businessId).then(() => {
					this.msgData.isPass = 2
				})
			},
			sendHelloMessage() { //发送消息
				this.content = 'Hi,我已通过你的好友申请~'
				this.friend = {
					"uuid": this.msgData.fromUserId,
					"name": this.msgData.fromUserName,
					"avatar": this.getImgUrl(this.msgData.fromAvatar)
				}
				if (this.content.trim() !== '') {
					let textMessage = this.goEasy.im.createTextMessage({
						text: this.content,
						to: {
							id: this.friend.uuid,
							type: this.GoEasy.IM_SCENE.PRIVATE,
							data: {
								name: this.friend.name,
								avatar: this.friend.avatar
							}
						}
					});
					this.sendMessage(textMessage);
				}
			},
			sendMessage(message) {
				let toId = message.to.id;
				let imService = getApp().globalData.imService
				let localHistory = imService.getPrivateMessages(toId)
				localHistory.push(message)
				this.goEasy.im.sendMessage({
					message: message,
					onSuccess: function(message) {

					},
					onFailed: function(error) {

					}
				});
			},
			toViewComment() {
				uni.navigateTo({
					url: `/pages/commentDetail/index?id=${this.msgData.businessId}`
				})
			},
			getCommentDetail(id, preData) {
				this.$api.getEvaluateDetail(id).then((res) => {
					this.msgData = {
						...preData,
						commentFromAvatar: res.fromAvatar,
						commentFromName:res.fromName,
						expertAvatar: res.toAvatar,
						expertName: res.toName,
						expertCompany: res.company
					}
				})

			},
			isAgreeShare(flag){
				this.$api.isAgreeShare({
					msgId: this.msgData.id,
					isPass: flag ? 1 : 2
				}).then((res)=>{
					if(flag){
						this.msgData.isPass = 1
					}else{
						this.msgData.isPass = 2
					}
				})
			},
			// 添加好友时 不让他看/不看他相关逻辑
			getUnseeFrineds(){
				this.unseeFrineds = []
				this.$api.getUnseeFrineds().then((res) => {
					// 不让他看的列表
					this.unseeFrineds = this.initSelectedUsers(res)
				})
			},
			getUnlikeFrineds(){
				this.unlikeFrineds = []
				this.$api.getUnlikeFrineds().then((res) => {
					// 不看他的列表
					this.unlikeFrineds = this.initSelectedUsers(res)
				})
			},	
			initSelectedUsers(res){
				if(res && res.length){
					return res.map((item)=>{
						return {
							fromUserId: item.fromUserId,
							toUserId: item.toUserId
						}
					})
				}
				return []
			},
			setUnseeFrineds() {
				this.unseeFrineds.push({
					fromUserId: this.userInfo.id,
					toUserId: this.msgData.fromUserId
				})
				this.$api.setUnseeFrineds(this.unseeFrineds)
			},
			setUnlikeFrineds() {
				this.unlikeFrineds.push({
					fromUserId: this.userInfo.id,
					toUserId: this.msgData.fromUserId
				})
				this.$api.setUnlikeFrineds(this.unlikeFrineds)
			},
			isAgreeApply(flag){
				this.$api.agreeFriendApplyByEvaluate({
					msgId: this.msgData.id,
					isPass: flag ? 1 : 2
				}).then(()=>{
					if(flag){
						this.msgData.isPass = 1
					}else{
						this.msgData.isPass = 2
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.msg-detail-wrap {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.msg-detail-bg {
		position: absolute;
		width: 750rpx;
		height: 100%;
	}

	.msg-detail {
		position: absolute;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 60rpx;

		.msg-detail-top {
			display: flex;
			justify-content: space-between;
			padding-bottom: 18rpx;
			border-bottom: 2rpx solid #AFD5FF;

			.msg-title-time {
				.msg-title {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 10rpx;

					.user-name {
						margin-right: 8rpx;
					}
				}

				.msg-time {
					font-size: 30rpx;
					font-weight: 400;
					color: #999999;
					line-height: 42rpx;
				}
			}

			.msg-avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
		}
	}

	.user-msg {
		.msg-content {
			display: flex;
			align-items: center;
			padding-bottom: 12rpx;
			flex-wrap: wrap;
			&.bb{
	            border-bottom: 2rpx solid #AFD5FF;
			}

			&.pdt14 {
				padding-top: 14rpx;
			}

			.from-user-avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin: 20rpx 0;
			}

			.from-user-name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
				margin-left: 14rpx;
				width: 90rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.fix-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin: 0 14rpx;
				&.nml{
					margin-left: 0;
				}
			}

			.to-user-avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin: 20rpx 0;
			}

			.to-user-name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
				margin-left: 14rpx;
				width: 90rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.user-remark {
			min-height: 150rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #AFD5FF;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
		}

		.user-remark2 {
			box-sizing: border-box;
			padding: 36rpx 0;
			border-bottom: 2rpx solid #AFD5FF;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
		}

		.other-tips {
			margin-top: 24rpx;
			font-size: 26rpx;
			color: #999;
			line-height: 32rpx;

			&.mg0 {
				margin-top: 0;
			}

			.user-name {
				color: #333;
				margin: 0 8rpx
			}
		}

		.btns {
			margin-top: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;

			.short-btn {
				height: 76rpx;
				width: 260rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #fff;
				background: #444;

				&.grey {
					background: #999;
				}
			}
		}

		.shared-comment {
			width: 400rpx;
			height: 220rpx;
			position: relative;
			box-sizing: border-box;
			padding: 42rpx 24rpx;
			background-color: #3399ff;
			&.mb20{
				margin-bottom: 20rpx;
			}

			.shared-expert-name {
				width: 230rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

			}

			.shared-expert-comp {
				margin-top: 10rpx;
				width: 230rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
			}

			.shared-expert-avatar {
				position: absolute;
				width: 96rpx;
				height: 96rpx;
				right: 28rpx;
				top: 42rpx;
			}
		}

		.apply-form-msg {
			width: 630rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 12rpx 20rpx;
			background-color: #fff;
			margin-top: 38rpx;

			.fix-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			.from-user-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin: 0 18rpx;
			}

			.from-user-name {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				line-height: 40rpx;
				margin-right: 18rpx;
			}
		}
	}

	.system-msg {
		.system-msg-text {
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
			line-height: 48rpx;
			margin-top: 18rpx;

			.user-name {
				font-weight: 600;
				margin: 0 8rpx;
			}

			.to-view-btn {
				font-size: 32rpx;
				font-weight: 400;
				color: #3399ff;
				margin-left: 8rpx;
				line-height: 48rpx;
			}
		}
	}

	.switch-block {
		margin-top: 40rpx;

		.switch-block-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #4A505C;
			line-height: 44rpx;
			margin-bottom: 20rpx;
		}
	}

	.msg-status-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;

		.status-img {
			position: absolute;
			width: 200rpx;
			height: 200rpx;
			right: 50rpx;
			top: 265rpx;
		}
	}
</style>
